<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>开放数据</title>
	</head>
	<style>
		* {
			box-sizing: border-box;
		}
		body{
			
		}
		.group {
			display: flex;
			line-height: 40px;
			width: 100%;
			flex-wrap: wrap;
			background: #666;
			margin: 24px 16px;
			box-shadow: #CCCCCC 0 0 5px;
		}
		
		.line {
			display: flex;
			flex: 1;
			height: 40px;
			width: 100%;
			align-items: center;
			background: #F2F2F2;
		}
		.title {
			background: #01ABFD;
			font-size: 16px;
			padding: 0px 8px;
			color: #FFFFFF;
			text-align: center;
		}
		.title1 {
			font-size: 16px;
			padding: 0px 8px;
			color: #FFFFFF;
			text-align: center;
		}
		
		
		.input {
			height: 40px;
			padding: 0px 16px;
			background: rgba(0, 0, 0, 0);
			border: 0px solid #000000;
		}
		
		
		.btn {
			position: relative;
			height: 40px;
			padding: 0px 16px;
			border: 0px;
			background: #e6e6e6;
			line-height: 40px;
			text-align: center;
			font-size: 20px;
			cursor: pointer;
		}
		
		[v-clock]{
			display: none;
		}
		/*
		
		.form-title {
			display: inline-block;
			min-width: 40px;
			text-align: center;
			font-weight: bolder;
			background: rgba(0, 0, 0, 0);
			border: 1px solid #000000;
			height: 40px;
			font-size: 18px;
		}
		
		*/
		
		
	</style>

	<body style="padding: 0px; margin: 0px;">
		
		<div style="display: flex;">

			<div id="app" class="" v-clock>
				<div v-for="(item,index) in data" class="group">
					<div class="title1">{{index}}</div>
					<div v-if="data[index]['Y']!=undefined" class="title1">{{data[index]['Y']}}年{{data[index]['m']}}月{{data[index]['d']}}日{{data[index]['weekday']}}</div>
					<div v-for="(v,i) in item" class="line" v-if="is_show(i)" >
						<div class="title">{{i}}</div>
						<input type="text" v-model="data[index][i]"  class="input" />
					</div>
					<input v-model="KeyName" placeholder="KeyName" />
					<div @click="add_key(index)" class="btn">+</div>
				</div>
				
				<div class="group">
					<input v-model="KeyIndex" placeholder="KeyIndex" />
					<div @click="add_Index()" class="btn">+</div>
				</div>
				
				<div style="margin: 16px;" @click="edit()" class="btn">保存</div>
				
				<h3 style="margin: 16px;">如数据有误请联系QQ 1076212909</h3>
				
			</div>

		</div>
		<script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
		<script>
			
			var data = <?php echo file_get_contents($_GET['d'].'.json'); ?>;
			var d =  '<?php echo $_GET['d']; ?>';

			var app = new Vue({
				el: '#app',
				data: {
					data: data,
					ym:"2020年1月",
					KeyName:"",
					KeyIndex:"",
				},
				mounted: function(){
					$("#uploadframe").height($(window).height())
				},
				watch:{
					data: {
				    	handler(newName, oldName) {
				      		console.log('obj.a changed');
				    	},
						immediate: true,
				    	deep: true
				  	}
				},
				methods: {
					
					is_show: function(key) {
						
						if( !/^[0-9]*$/.test(d) ) {
							return true;
						}
						
						
						if(key == "M" || key == "m" || key == "D" 
							|| key == "d"
							|| key == "Y"
							|| key == "ymd"
							|| key == "weekday"
							|| key == "weekday_number"
							|| key == "avoid"
							|| key == "animal"
							|| key == "cnDay"
							|| key == "gzDate"
							|| key == "gzMonth"
							|| key == "gzYear"
							|| key == "isBigMonth"
							|| key == "lDate"
							|| key == "lMonth"
							|| key == "lunarDate"
							|| key == "lunarMonth"
							|| key == "lunarYear"
							|| key == "day"
							|| key == "month"
							|| key == "oDate"
							|| key == "status"
							|| key == "suit"
							|| key == "term"
							|| key == "type"
							|| key == "value"
							|| key == "year"
							|| key == "day"
						){
							return false;
						}
						return true;
					},
					
					add_key: function(index) {
						Vue.set(data[index], this.KeyName, '');
						
					},
					
					add_Index: function(index) {
						Vue.set(data,this.KeyIndex, {'is_working':'0'});
						
					},
					
					
					
					edit: function() {
						$.ajax({
							type: "post",
							url: "make.php",
							data: {
								d:d,
								data: JSON.stringify(app.data),
							},
							success: (res) => {
								window.location.reload();
							},
						});
					},
					
					
				}
			})
			
		</script>

	</body>

</html>